import {Form, Button, Input, Row, Col, Cascader, DatePicker,InputNumber,Radio  } from 'antd';
import moment from 'moment';
const FormItem = Form.Item;

function query({form, onOk }){

  const {getFieldDecorator,getFieldsValue,resetFields} = form;
  const formItemLayout = {
    // labelCol: { span: 7 },
    wrapperCol: { span: 16 },
    colon:false,
  };
  const submit = () => {
    const values = getFieldsValue();
    onOk(values);

  };

  const reset = () => {
    resetFields();
  }
  return(
    <div   style={{'border':'0px' ,color:'gray','border-style':'none'}}>
    <Form
      onSubmit={submit}
    >
      <Row>
        <Col span={8}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('product',)(
                <Input size='large' placeholder='产品'/>
              )
            }
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('price',)(
                 <InputNumber min={0} max={1000} step={20.00} size='large' placeholder='价格' style={{width:'100%'}}/>
              )
            }
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('customerId', )(
                <Input size='large'  placeholder='客户编号'/>
              )
            }
          </FormItem>
        </Col>

      </Row>

      <Row>
        <Col span={24} style={{ textAlign: 'right'}}>
          <Button type='primary' icon='search' onClick={submit} style={{ marginRight: 20}}>查询</Button>
          <Button onClick={reset} style={{ marginRight: 20}}>清 除</Button>
        </Col>
      </Row>
    </Form>
    </div>
  )
}

export default Form.create()(query);
